import SliderCaptcha from 'rc-slider-captcha';
import React, { useRef, useState } from 'react';
import { createPuzzle } from 'create-puzzle';
import DemoImage from '../assets/bg2.jpg';
import { Radio } from 'antd';
import { useUpdateEffect } from 'rc-hooks';
function Demo() {
    const [format, setFormat] = useState('blob');
    const actionRef = useRef();
    const offsetXRef = useRef(0); // x 轴偏移值
    useUpdateEffect(() => {
        var _a;
        (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.refresh();
    }, [format]);
    return (<div>
        
        <SliderCaptcha request={() => createPuzzle(DemoImage, {
            format
        }).then((res) => {
            console.log(res);
            
            offsetXRef.current = res.x;
            return {
                bgUrl: res.bgUrl,
                puzzleUrl: res.puzzleUrl
            };
        })} onVerify={(data) => {
            console.log(data);
            if (data.x >= offsetXRef.current - 5 && data.x < offsetXRef.current + 5) {
                return Promise.resolve();
            }
            return Promise.reject();
        }} bgSize={{
            width: 480
        }}  actionRef={actionRef} />
    </div>);
}
export default Demo;